[SEO] 웹사이트 메타 이미지 설정하는 방법

얼마 전 SNS에 웹사이트를 공유해보니 이미지가 나오지 않는 중대한 이슈가 있음을 발견하였습니다... 언제부터 안나왔는지 모르겠지만 확인해보니 메타 이미지 정보인 og image(open graph)와 twitter image 태그가 존재하지 않았습니다. 해당 이슈를 수정하면서 메타 이미지 추가 방법에 대하여 알아봅니다.

스크린샷) webisfree.com에  추가된 메타 이미지
위 메타 이미지는 아래 링크에서도 확인이 가능합니다.

https://webisfree.com/webisfree_og.jpg

# 메타 이미지 웹사이트에 추가하기

메타 이미지를 추가하기 이 전에 SEO, 검색엔진 최적화를 위해서 메타 이미지는 매우 중요하다고 알려져있습니다. 그렇다면 메타 이미지 추가는 언제 필요한지 먼저 알아봅니다.

! 메타 이미지는 언제 필요할까요?

웹사이트의 메타 이미지, 또는 오픈 그래프 (OG) 이미지는 소셜 미디어 플랫폼에서 콘텐츠를 공유할 때 사용됩니다. 카카오톡의 경우에도 동일합니다. 사용자가 웹사이트의 URL을 공유할 때 지정된 메타 이미지가 포스트에 표시되어, 더 매력적이고 전문적인 공유를 가능하도록 만듭니다. 그럼 아래에서는 메타 이미지 추가 방법에 대하여 자세히 알아봅니다.


@ 메타 이미지 추가하기, og image, twitter image
웹사이트에 메타 이미지를 설정하는 단계별 가이드는 다음과 같습니다. 하나씩 알아봅니다.

** OG 이미지 생성하기 **
- 웹사이트 또는 특정 페이지를 대표하는 이미지를 디자인합니다.
- 이미지는 고해상도 장치에서 최적의 디스플레이를 위해 너비 1200 픽셀, 높이 630 픽셀 이상이어야 합니다.


** 이미지 웹 서버로 업로드하기 **
- 생성 완료된 이미지를 웹 서버에 업로드하고 URL을 통해 접근할 수 있도록 합니다.


** 메타 태그 추가하기 **
이제 아래와 같이 HTML 문서의 `head` 섹션에 적절한 메타 태그를 추가합니다. 가장 중요한 부분이라 할 수 있습니다.

@ 페이스북 (오픈 그래프) 예시

@ 트위터 (트위터 카드) 예시


** 동일한 과정을 각 페이지마다 반복 **
다른 페이지에 대해 다른 이미지를 가지고 있다면, 각 페이지에 대해 이 과정을 반복해야 합니다. 즉 페이지의 대표 이미지마다 다른 설정이 필요할 수 있겠습니다.


이 외에 추가된 메타 이미지는 모두 외부에서 접근이 가능한 공개 설정이 필요합니다. 만약 비공개라면 공개로 변경하시기 바랍니다. 또한 이미지의 업데이트가 즉시 반영되지 않으면 검증 도구와 소셜 미디어 플랫폼의 캐시를 지워야 할 수도 있습니다. 일부적으로 내부 캐시에 의해서 변경되어도 나중에 반영될 수 있습니다.

마지막으로 확실히 메타 이미지가 추가되었는지 확인하려면 SEO 검증툴을 사용하거나 실제로 특정 글을 SNS에 공유하여 이미지가 잘 노출하는지 검증하는 것도 중요할 수 있겠습니다.

페이스북 오픈 그래프의 경우
[Facebook Sharing Debugger]https://developers.facebook.com/tools/debug/)를 사용합니다.

트위터 카드의 경우
[Twitter Card Validator](https://cards-dev.twitter.com/validator)를 사용합니다.


여기까지 메타 이미지 추가 방법에 대하여 간략하게 알아보았습니다.